<!-- 参数下发 -->
<template>
    <div class="mainContent">
        <div class="tab">
            <span>设备控制</span>
            <div>
                <!-- <label>同功率负载控制：</label> -->
                <ul>
                    <li :class="getTabClass(1)" @click="setTabClass(1)">分闸</li>
                    <li :class="getTabClass(2)" @click="setTabClass(2)">合闸</li>
                </ul>
            </div>
        </div>

        <div class="content">
            <div class="treeContent" :class="dir == 'left' ? 'leftArrow' : 'rightArrow'">
                <!-- <el-input placeholder="输入关键字搜索" v-model="input3" class="input-with-select">
                    <el-button slot="append" icon="el-icon-search"></el-button>
                </el-input>

                <div class="treeMain">
                    <el-tree
                        @node-click="nodeClick"
                        :data="data"
                        node-key="id"
                        :default-expanded-keys="[1, 4, 9, 99]"
                        :props="defaultProps"
                        :highlight-current="true"
                        :expand-on-click-node="false"
                        :current-node-key="currentNodeId"
                    >
                        <span slot-scope="{node}" class="custom-tree-node" :title="node.label" v-text="node.label"> </span>
                    </el-tree>
                </div> -->
                <buildTree :height="secondTableHeight" @handleCurrentChange="handleCurrentChange" name="建筑列表"></buildTree>
            </div>

            <div class="rightContent" :class="dir == 'left' ? 'leftTable' : 'rightTable'">
                <div class="cHeader" style="margin-top: 0">
                    <label>功率负载控制</label>
                    <div>
                        <el-button type="primary" size="small" disabled>批量下发</el-button>
                        <label @click="onShow(1)">
                            <span> {{ glfzkz ? '展开' : '收起' }} </span>
                            <img
                                :src="
                                    glfzkz
                                        ? require('../../../assets/images/controlCenter/bottomArrow.png')
                                        : require('../../../assets/images/controlCenter/topArrow.png')
                                "
                            />
                        </label>
                    </div>
                </div>
                <div class="cContent" v-if="!glfzkz">
                    <div class="cContentItem">
                        <div class="cCheck">
                            <img src="../../../assets/images/controlCenter/unSelect.png" />
                            <label>启用总功率控制 </label>
                        </div>
                        <div class="cCheckItem half25" style="padding-left: 45px">
                            <label> 总功率(kW)：</label>
                            <el-input type="text" placeholder="请输入" style="width: 120px"></el-input>
                        </div>
                        <div class="cCheckItem half25">
                            <label>恢复时间(分)： </label>
                            <el-input-number v-model="num" @change="handleChange" :min="1" :max="1000" label="描述文字"></el-input-number>
                        </div>
                        <div class="cButton">
                            <el-button type="primary" size="small">确定下发</el-button>
                        </div>
                    </div>
                    <div class="cContentItem">
                        <div class="cCheck">
                            <img src="../../../assets/images/controlCenter/unSelect.png" />
                            <label>启用恶性负载控制</label>
                        </div>
                        <div class="cCheckItem half25" style="padding-left: 45px">
                            <label>恶性负载限定值(W)：</label>
                            <el-input type="number" placeholder="请输入" style="width: 120px"></el-input>
                        </div>
                        <div class="cCheckItem half25">
                            <label>总负载(kW)：</label>
                            <el-input type="number" placeholder="请输入" style="width: 120px"></el-input>
                        </div>
                        <div class="cCheckItem half25">
                            <label>单一负载最大值(W)：</label>
                            <el-input type="number" placeholder="请输入" style="width: 120px"></el-input>
                        </div>
                        <div class="cCheckItem half25">
                            <label>超负载跳闸自动合闸时间(S)：</label>
                            <el-input type="number" placeholder="请输入" style="width: 120px"></el-input>
                        </div>
                        <div class="cButton">
                            <el-button type="primary" size="small">确定下发</el-button>
                        </div>
                    </div>
                    <div class="cContentItem">
                        <div class="cCheck">
                            <img src="../../../assets/images/controlCenter/unSelect.png" />
                            <label>启用本地预付费负载控制 </label>
                        </div>
                        <div class="cCheckItem half25" style="padding-left: 45px">
                            <label>显示告警电量（kWh)：</label>
                            <el-input type="number" placeholder="请输入" style="width: 120px"></el-input>
                        </div>
                        <div class="cCheckItem half25">
                            <label>拉闸告警电量(kWh)：</label>
                            <el-input type="number" placeholder="请输入" style="width: 120px"></el-input>
                        </div>
                        <div class="cCheckItem half25">
                            <label>协议透支电量(kWh)：</label>
                            <el-input type="number" placeholder="请输入" style="width: 120px"></el-input>
                        </div>
                        <div class="cButton">
                            <el-button type="primary" size="small">确定下发</el-button>
                        </div>
                    </div>
                </div>
                <div class="cHeader">
                    <label>时段控制</label>
                    <div>
                        <el-button type="primary" size="small" disabled>批量下发</el-button>
                        <label @click="onShow(2)">
                            <span> {{ sdkz ? '展开' : '收起' }} </span>
                            <img
                                :src="
                                    sdkz
                                        ? require('../../../assets/images/controlCenter/bottomArrow.png')
                                        : require('../../../assets/images/controlCenter/topArrow.png')
                                "
                            />
                        </label>
                    </div>
                </div>
                <div class="cContent" v-if="!sdkz">
                    <div class="cContentItem">
                        <div class="cCheck">
                            <img src="../../../assets/images/controlCenter/unSelect.png" />
                            <label>启用分时段控制 </label>
                        </div>
                        <div class="cCheckItem half25" style="padding-left: 45px">
                            <label>控制时段个数：</label>
                            <GeShu></GeShu>
                        </div>
                        <div class="cCheckItem half25">
                            <label>回路：</label>
                            <HuiLu></HuiLu>
                        </div>
                        <div class="cCheckItem half25">
                            <label>时间： </label>
                            <el-date-picker
                                v-model="time1"
                                type="daterange"
                                range-separator="-"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                style="width: 190px"
                            >
                            </el-date-picker>
                        </div>
                        <div class="cCheckItem half25">
                            <label>分闸时段1(hh:mm)： </label>
                            <el-time-picker
                                is-range
                                v-model="time2"
                                range-separator="-"
                                start-placeholder="开始时间"
                                end-placeholder="结束时间"
                                placeholder="选择时间范围"
                                format="HH:mm"
                                style="width: 180px"
                            >
                            </el-time-picker>
                        </div>
                        <div class="cCheckItem half100" style="padding-left: 45px">
                            <label>星期： </label>
                            <XingQi></XingQi>
                        </div>
                        <div class="cButton">
                            <el-button type="primary" size="small">确定下发</el-button>
                        </div>
                    </div>
                    <div class="cContentItem">
                        <div class="cCheck">
                            <img src="../../../assets/images/controlCenter/unSelect.png" />
                            <label>启用分时限流 </label>
                        </div>
                        <div class="cCheckItem half25" style="padding-left: 45px">
                            <label>限流时段个数：</label>
                            <el-input type="number" placeholder="请输入" style="width: 120px"></el-input>
                        </div>
                        <div class="cCheckItem half25">
                            <label>回路：</label>
                            <HuiLu></HuiLu>
                        </div>
                        <div class="cCheckItem half25">
                            <label>限流功率(W)：</label>
                            <el-input-number v-model="num" @change="handleChange" :min="1" :max="1000" label="描述文字"></el-input-number>
                        </div>
                        <div class="cCheckItem half25">
                            <label>限流时段1(hh:mm)：</label>
                            <el-time-picker
                                is-range
                                v-model="time2"
                                range-separator="-"
                                start-placeholder="开始时间"
                                end-placeholder="结束时间"
                                placeholder="选择时间范围"
                                format="HH:mm"
                                style="width: 180px"
                            >
                            </el-time-picker>
                        </div>
                        <div class="cButton">
                            <el-button type="primary" size="small">确定下发</el-button>
                        </div>
                    </div>
                </div>
                <div class="cHeader">
                    <label>补助透支控制 </label>
                    <div>
                        <el-button type="primary" size="small" disabled>批量下发</el-button>
                        <label @click="onShow(3)">
                            <span> {{ bztzkz ? '展开' : '收起' }} </span>
                            <img
                                :src="
                                    bztzkz
                                        ? require('../../../assets/images/controlCenter/bottomArrow.png')
                                        : require('../../../assets/images/controlCenter/topArrow.png')
                                "
                            />
                        </label>
                    </div>
                </div>
                <div class="cContent" v-if="!bztzkz">
                    <div class="cContentItem">
                        <div class="cCheck">
                            <img src="../../../assets/images/controlCenter/unSelect.png" />
                            <label>启用补助下发 </label>
                        </div>
                        <div class="cCheckItem half25" style="padding-left: 45px">
                            <label>发放方式：</label>
                            <FaFang></FaFang>
                        </div>
                        <div class="cCheckItem half25">
                            <label>费用类别：</label>
                            <FeiYong></FeiYong>
                        </div>
                        <div class="cCheckItem half25">
                            <label>账户类别： </label>
                            <ZhangHu></ZhangHu>
                        </div>
                        <div class="cCheckItem half25">
                            <label>补助形式： </label>
                            <BuZhu></BuZhu>
                        </div>
                        <div class="cCheckItem half25" style="padding-left: 45px">
                            <label>补助形式： </label>
                            <BuZhuXingShi></BuZhuXingShi>
                        </div>
                        <div class="cCheckItem half25">
                            <label>补助时间： </label>
                            <BuZhuShiJian></BuZhuShiJian>
                        </div>
                        <div class="cCheckItem half25">
                            <img src="../../../assets/images/controlCenter/unSelect.png" />
                            <label>自动下发 </label>
                        </div>
                        <div class="cButton">
                            <el-button type="primary" size="small">确定下发</el-button>
                        </div>
                    </div>
                    <div class="cContentItem">
                        <div class="cCheck">
                            <img src="../../../assets/images/controlCenter/unSelect.png" />
                            <label>启用补助核销 </label>
                        </div>
                        <div class="cCheckItem half25" style="padding-left: 45px">
                            <label>核销方式：</label>
                            <FaFang></FaFang>
                        </div>
                        <div class="cCheckItem half25">
                            <label>费用类别：</label>
                            <FeiYong></FeiYong>
                        </div>
                        <div class="cCheckItem half25">
                            <label>账户类别：</label>
                            <ZhangHu></ZhangHu>
                        </div>
                        <div class="cCheckItem half25">
                            <label>核销形式：</label>
                            <HeXiao></HeXiao>
                        </div>
                        <div class="cCheckItem half25" style="padding-left: 45px">
                            <label>核销时间：</label>
                            <HeXiaoShiJian></HeXiaoShiJian>
                        </div>
                        <div class="cCheckItem half25">
                            <img src="../../../assets/images/controlCenter/unSelect.png" />
                            <label>余额清零 </label>
                        </div>
                        <div class="cCheckItem half25">
                            <img src="../../../assets/images/controlCenter/unSelect.png" />
                            <label>自动核销 </label>
                        </div>
                        <div class="cButton">
                            <el-button type="primary" size="small">确定下发</el-button>
                        </div>
                    </div>
                    <div class="cContentItem">
                        <div class="cCheck">
                            <img src="../../../assets/images/controlCenter/unSelect.png" />
                            <label>启用长期透支账户 </label>
                        </div>
                        <div class="cCheckItem half25" style="padding-left: 45px">
                            <label>透支金额(元)：</label>
                            <el-input type="number" placeholder="请输入" style="width: 120px"></el-input>
                        </div>
                        <div class="cCheckItem half25">
                            <label>透支类别：</label>
                            <FeiYong></FeiYong>
                        </div>
                        <div class="cCheckItem half25">
                            <label>补助形式：</label>
                            <BuZhuXingShi></BuZhuXingShi>
                        </div>
                        <div class="cCheckItem half25">
                            <label>补助时间：</label>
                            <BuZhuShiJian></BuZhuShiJian>
                        </div>
                        <div class="cButton">
                            <el-button type="primary" size="small">确定下发</el-button>
                            <el-button type="primary" size="small">透支额度调整</el-button>
                            <el-button type="primary" size="small">取消透支</el-button>
                        </div>
                    </div>
                    <div class="cContentItem">
                        <div class="cCheck">
                            <img src="../../../assets/images/controlCenter/unSelect.png" />
                            <label>启用账户清零 </label>
                        </div>
                        <div class="cCheckItem half25" style="padding-left: 45px">
                            <label>账户类别：</label>
                            <FeiYong></FeiYong>
                        </div>
                        <div class="cCheckItem half25">
                            <label>清零方式：</label>
                            <HeXiao></HeXiao>
                        </div>
                        <div class="cCheckItem half25">
                            <label>账户类别：</label>
                            <ZhangHu></ZhangHu>
                        </div>
                        <div class="cCheckItem half25">
                            <label>清零形式：</label>
                            <BuZhu></BuZhu>
                        </div>
                        <div class="cCheckItem half25" style="padding-left: 45px">
                            <label>清零余额：</label>
                            <BuZhuXingShi></BuZhuXingShi>
                        </div>
                        <div class="cButton">
                            <el-button type="primary" size="small">确定下发</el-button>
                            <el-button type="primary" size="small">自动清零</el-button>
                        </div>
                    </div>
                </div>
                <div class="cHeader">
                    <label>换表操作 </label>
                    <div>
                        <label @click="onShow(4)">
                            <span> {{ hbcz ? '展开' : '收起' }} </span>
                            <img
                                :src="
                                    hbcz
                                        ? require('../../../assets/images/controlCenter/bottomArrow.png')
                                        : require('../../../assets/images/controlCenter/topArrow.png')
                                "
                            />
                        </label>
                    </div>
                </div>
                <div class="cContentItem" style="margin-top: 10px" v-if="!hbcz">
                    <AddTable></AddTable>
                    <div class="cButton" style="clear: both; text-align: left; padding-left: 45px; padding-bottom: 10px">
                        <el-button type="primary" size="small">确定换表</el-button>
                    </div>
                </div>
            </div>
        </div>

        <arrowLeft @arrowChange="arrowChange"></arrowLeft>
    </div>
</template>

<script>
import arrowLeft from '@/components/customComponents/arrowLeft'
import {Utility} from '@/libs/utility.js'
import {LeftTree} from '@/mockData/monitorCenter.js'
import AddTable from './components/addTable'
import BuZhu from './components/buZhu'
import BuZhuShiJian from './components/buZhuShiJian'
import BuZhuXingShi from './components/buZhuXingShi'
import FaFang from './components/faFang.vue'
import FeiYong from './components/feiYong.vue'
import GeShu from './components/geShu.vue'
import HeXiao from './components/heXiao'
import HeXiaoShiJian from './components/heXiaoShiJian'
import HuiLu from './components/huiLu.vue'
import XingQi from './components/xingQi.vue'
import ZhangHu from './components/zhangHu'
import buildTree from '@/components/customComponents/managementCenter/buildTree'
export default {
    name: 'parameterDistribution',
    components: {
        arrowLeft,
        HuiLu,
        GeShu,
        XingQi,
        FaFang,
        FeiYong,
        ZhangHu,
        BuZhu,
        BuZhuXingShi,
        BuZhuShiJian,
        HeXiao,
        HeXiaoShiJian,
        AddTable,
        buildTree
    },
    data() {
        return {
            secondTableHeight: document.body.clientHeight - 200,
            // 功率负载控制 展开收缩  true为收缩起来了
            glfzkz: true,
            // 时段控制
            sdkz: true,
            // 补助透支控制
            bztzkz: true,
            // 换表操作
            hbcz: true,
            // 是否含有楼层
            isHasFloor: false,
            currentNodeId: 1,
            currentNodeName: '吉首大学张家界学院',
            deviceType: '1',
            dir: 'left',
            time2: '',
            time1: '',
            num: 50,
            fhz: true,
            tabSelect: 1,
            input3: '',
            data: LeftTree,
            defaultProps: {
                children: 'children',
                label: 'label'
            },
            listTreeData: [],
            roomList: []
        }
    },
    computed: {},
    created() {},
    mounted() {
        this.$nextTick(() => {
            const list = Utility.arrayFlat(LeftTree, (t) => t.children)
            this.listTreeData = list
            console.log(this.listTreeData, 'this.listTreeData ...')
            this.roomList = list.filter((t) => t.id == '999')

            this.getHeight()

            /*窗口自适应，关键代码*/
            window.onresize = () => {
                this.getHeight()
            }
        })
    },
    methods: {
        getHeight() {
            this.secondTableHeight = document.body.clientHeight - 200
        },
        /**
         * 展开收缩
         * @param type  1、功率负载控制   2、时段控制 3、补助透支控制 4、换表操作
         */
        onShow(type) {
            if (type == 1) {
                this.glfzkz = !this.glfzkz
            }
            if (type == 2) {
                this.sdkz = !this.sdkz
            }
            // 补助透支控制
            if (type == 3) {
                this.bztzkz = !this.bztzkz
            }
            if (type == 4) {
                this.hbcz = !this.hbcz
            }
        },
        nodeClick(node) {
            this.isHasFloor = node.type == 'room'
            this.currentNodeId = node.id
            // 显示两级
            var item = this.listTreeData.find((t) => t.id == node.parentId)
            if (item) {
                this.currentNodeName = item.label + '   -   ' + node.label
            } else {
                this.currentNodeName = node.label
            }
            if (node.type == 'room') {
                this.currentNodeName = node.label
            }
        },
        arrowChange(e) {
            this.dir = e
        },
        handleChange(e) {
            console.log(e)
        },
        getTabClass(tab) {
            return this.tabSelect == tab ? 'hover' : ''
        },
        setTabClass(tab) {
            this.tabSelect = tab
        }
    }
}
</script>

<style lang="scss" scoped>
.left {
    left: 230px !important;
}
.leftArrow {
    width: 250px !important;
}
.rightArrow {
    width: 0 !important;
    overflow: hidden;
    padding: 0 !important;
    margin: 0 !important;
}
.leftTable {
    max-width: calc(100% - 260px);
}
.rightTable {
    max-width: calc(100% - 0px);
}
.custom-tree-node {
    width: 100%;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    display: block !important;
}
.mainContent {
    background-color: #f5f5f5;
    height: calc(100vh - 100px);
    margin: 10px 0;
    width: 100%;
    position: relative;
    .tab {
        display: flex;
        border-bottom: 1px solid #ebeef5;
        line-height: 37px;
        height: 40px;
        margin: 0;
        background: #fff;
        span {
            display: block;
            width: 67px;
            text-align: left;
            position: relative;
            font-size: 14px;
            margin-left: 10px;
            &::before {
                position: absolute;
                content: '';
                bottom: 0;
                left: 0;
                height: 3px;
                background-color: #2680fb;
                width: 66px;
            }
        }
        div {
            flex: 1;
            text-align: right;
            label {
                font-size: 14px;
            }
            ul {
                padding: 0;
                margin: 0;
                list-style-type: none;
                float: right;
                li {
                    font-size: 14px;
                    float: left;
                    width: 50px;
                    cursor: pointer;
                    text-align: center;
                    position: relative;
                    margin-right: 5px;
                    &:hover {
                        border-bottom: 2px solid #2680fb;
                    }
                }
                .hover {
                    border-bottom: 2px solid #2680fb;
                    color: #2680fb;
                }
            }
        }
    }
    .content {
        padding: 0;
        display: flex;
        background-color: #f5f5f5;
        margin-top: 10px;
        height: calc(100vh - 164px);
        .treeContent {
            margin-right: 0;
            transition: transform 0.3s;
            width: 300px;
            border-right: 1px solid #eee;
            text-align: left;
            background: #fff;
            padding: 10px;
            .treeMain {
                height: calc(100vh - 215px);
                overflow-y: auto;
                margin-top: 10px;
            }
        }
        .rightContent::-webkit-scrollbar {
            width: 0px;
        }
        .rightContent::-webkit-scrollbar-thumb {
            background: #ccc;
            border-radius: 0px;
        }
        .rightContent {
            margin-left: 10px;
            flex: 1;
            text-align: left;
            background-color: #f5f5f5;
            height: calc(100vh - 175px);
            overflow-y: auto;
            overflow-x: hidden;
            padding-bottom: 10px;
            .cHeader {
                font-size: 14px;
                display: flex;
                background-color: #fff;
                height: 45px;
                line-height: 45px;
                padding: 0 10px;
                margin-top: 10px;
                label {
                    font-size: 14px;
                }
                div {
                    label {
                        cursor: pointer;
                    }
                    flex: 1;
                    text-align: right;
                    span {
                        font-size: 14px;
                        margin: 0 5px 0 10px;
                        cursor: pointer;
                        color: #2781fb;
                    }
                    img {
                        float: right;
                        margin-top: 13px;
                        width: 20px;
                        cursor: pointer;
                    }
                }
            }
            .cContent {
                font-size: 14px;

                .cContentItem {
                    font-size: 14px;
                    padding: 10px;
                    background: #fff;
                    margin-top: 10px;
                    .cCheck {
                        font-size: 14px;
                        height: 35px;
                        line-height: 35px;
                        text-align: left;
                        margin: 15px;
                        img {
                            font-size: 14px;
                            width: 20px;
                            float: left;
                            margin-right: 10px;
                            margin-top: 7px;
                            cursor: pointer;
                        }
                        label {
                            font-size: 14px;
                        }
                    }
                    .cCheckItem {
                        height: 32px;
                        line-height: 32px;
                        margin-bottom: 15px;
                        img {
                            width: 20px;
                            margin-top: 5px;
                        }
                        label,
                        img {
                            font-size: 14px;
                            float: left;
                            margin-right: 10px;
                        }
                        div,
                        .el-input {
                            float: left;
                        }
                    }
                    .half25 {
                        width: 24%;
                        text-align: center;
                        float: left;
                    }
                    .half100 {
                        width: 100%;
                        text-align: center;
                        float: left;
                    }
                    .cButton {
                        clear: both;
                        text-align: left;
                        padding-left: 45px;
                    }
                }
            }
            .cContentItem {
                background: #fff;
            }
        }
    }
}
</style>
